<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {get} from '@/api/api'
import {useRouter} from 'vue-router'
import {typeList} from '@/utils/index'

const router = useRouter()
const countObj = ref({})
const countArr = ref([])
const countIndex = ref(0)
const progressData = ref(typeList)
const toPrev = () => {
    router.push('/mine')
}
const total:any = ref(0)

const data = ref([{
    name: '剩余次数明细',
    key: 'count'
}, {
    name: '全部次数明细',
    key: 'allCount'
}])

const getAccountInfo = async () => {
    const res:any = await get('/c/user/account/info');
    countObj.value  = res.data?.data
    total.value = Object.values(res.data?.data).reduce((accumulator:any, currentValue:any) => accumulator + currentValue, 0);
}

const getAccountList = async () => {
    let params = {
        page: 1,
        size: 10
    }
    const res:any = await get('/c/user/account/list', params);
    countArr.value  = res.data?.data.content
    total.value = res.data?.data?.totalElements
}
onMounted( () => {
    getAccountInfo()
})
const changeCount = (item: any, index: number) => {
    countIndex.value = index
    if (item.key === 'count') {
        getAccountInfo()
    } else {
        getAccountList()
    }
}
const setProgress = (item: any) => {
    return progressData.value.filter((i) => { return i.key === item})[0]?.name
}
</script>

<template>

  <div class="my">
    <div class="my-top">
        <div class="my-nav">
            <img src="@/assets/toPrev.png" alt=""  @click="toPrev()">
            <div class="my-item">查询次数</div>
        </div>
        <div class="my-item1">
            <div>剩余查询次数</div>
            <div class="count">{{total}}</div>
        </div>
        <div class="my-item2">
            <el-button v-for="(item,index) in data" :key="item.key" @click="changeCount(item, index)" :class="{active: index === countIndex}">
                {{item.name}}
            </el-button>
        </div>
    </div>
    <div class="my-search">
        <template v-if="countIndex === 0">
            <div class="my-search-item" >
                <div>不动产</div>
                <div>{{countObj.immovablesLastNum}}</div>
            </div>
            <div class="my-search-item" >
                <div>司法数据</div>
                <div>{{countObj.judicialdataLastNum}}</div>
            </div>
            <div class="my-search-item" >
                <div>社保</div>
                <div>{{countObj.socialsecurityLastNum}}</div>
            </div>
            <div class="my-search-item" >
                <div>不动产+司法数据+社保</div>
                <div>{{countObj.immovablesJudicialdataSocialsecurityLastNum}}</div>
            </div>
            <div class="my-search-item" >
                <div>不动产+司法数据</div>
                <div>{{countObj.immovablesJudicialdataLastNum}}</div>
            </div>
            <div class="my-search-item" >
                <div>不动产+社保</div>
                <div>{{countObj.immovablesSocialsecurityLastNum}}</div>
            </div>
            <div class="my-search-item" >
                <div>司法数据+社保</div>
                <div>{{countObj.judicialdataSocialsecurityLastNum}}</div>
            </div>
        </template>
        <template v-else>
            <div class="all-search-item" v-for="(item, index) in countArr" :key="index">
                <div>
                    <div class="black_fz">{{setProgress(item.queryType)}}</div>
                    <div class="gray_fz">查询时间：{{item.orderDate}}</div>
                    <div class="gray_fz">订单编号：{{item.orderCode}}</div>
                </div>
                <span :class="item.accountType === 'QUERY' ? '' : 'add'">{{item.accountType === 'QUERY' ? '-' : '+' }}{{item.updateNum}}</span>

            </div>

        </template>
    </div>
  </div>
</template>

<style scoped>
.my{
    background-color: #f6f6f6;
}
.my-nav{
    position: relative;
    padding-top: 25px;
    margin-bottom: 12px;
}
.my-nav img{
    position: absolute;
    left: 16px;
}
.my-top{
    padding-bottom: 20px;
    background: #fff;
}
.my-top img {
    width: 10px;
    display: inline-block;
    padding-top: 25px;
    top: 0;
}
.my-item{
    text-align: center;
    width: 100%;
}
.my-item1{
    padding-left: 20px;
    font-size: 14px;
    color: #999;
}
.my-item2{
    padding-left: 16px;
}
:deep(.el-button){
    border-radius: 20px;
    margin-top: 6px;
    border: none;
     color: #676767;
     background: #F6F6F6;
}
.active{
     color: #2863fd;
     background: #DFE9FF;

}
.count{
    color: #2863FD;
    font-size: 28px;
    font-weight: bold;
}
.my-search{
    height: calc(100vh - 170px);
    overflow-y: scroll;
    margin-top: 12px;
}
.my-search-item{
    display: flex;
    justify-content: space-between;
    margin: 13px 16px;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    margin-top: 0;
}
.all-search-item{
    display: flex;
    justify-content: space-between;
    margin: 13px 16px;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
}
.all-search-item:first-child{
    margin-top: 0;
}
.all-search-item span{
    margin-top: 3px;
}
.gray_fz{
    color: #999999;
    font-size: 12px;
}
.black_fz{
    font-weight: 600;
    color: #333;
}
.add{
    color: #2863fd;
}
</style>
